<template>
  <div class="container1">
    <h1>Teacher ManagementPage</h1>
    <nav>
      <button @click="viewAttendance">查看考勤</button>
      <button @click="viewAnswers">查看回答记录</button>
    </nav>
    <div v-if="view === 'attendance'" class="table1">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>打卡时间</th>
            <th>状态</th>
            <th>请假理由</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(checkIn, index) in checkIns" :key="index">
            <td>{{ checkIn.name }}</td>
            <td>{{ checkIn.gender }}</td>
            <td>{{ checkIn.age }}</td>
            <td>{{ checkIn.time }}</td>
            <td>{{ checkIn.leaveType ? '未到' : '已到' }}</td>
            <td>
              <button v-if="checkIn.leaveType" @click="viewLeaveReason(checkIn.leaveReason)" class="button1">查看理由</button>
            </td>
            <td><button @click="deleteCheckIn(index)" class="button2">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="view === 'answers'">
      <table class="table2">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>回答时间</th>
            <th>回答内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(answer, index) in answers" :key="index">
            <td>{{ answer.name }}</td>
            <td>{{ answer.gender }}</td>
            <td>{{ answer.age }}</td>
            <td>{{ answer.time }}</td>
            <td>{{ answer.answer }}</td>
            <td><button @click="deleteAnswer(index)" class="button2">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="leaveReasonModal" class="lrm">
      <h3>请假理由</h3>
      <p>{{ leaveReasonModal }}</p>
      <button @click="closeLeaveReasonModal" class="button0">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeacherView',
  data() {
    return {
      checkIns: [],
      answers: [],
      view: 'attendance',
      leaveReasonModal: ''
    };
  },
  mounted() {
    this.checkIns = JSON.parse(localStorage.getItem('checkIns')) || [];
    this.answers = JSON.parse(localStorage.getItem('answers')) || [];
  },
  methods: {
    viewAttendance() {
      this.view = 'attendance';
    },
    viewAnswers() {
      this.view = 'answers';
    },
    deleteCheckIn(index) {
      this.checkIns.splice(index, 1);
      localStorage.setItem('checkIns', JSON.stringify(this.checkIns));
    },
    deleteAnswer(index) {
      this.answers.splice(index, 1);
      localStorage.setItem('answers', JSON.stringify(this.answers));
    },
    viewLeaveReason(reason) {
      this.leaveReasonModal = reason;
    },
    closeLeaveReasonModal() {
      this.leaveReasonModal = '';
    }
  }
};
</script>

<style scoped>
.container1 {
  background-image: url("/src/222.jpg"); /* 替换为您的图片URL */
  background-size: cover; /* 使背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-attachment: fixed; /* 背景图片固定，不随滚动条滚动 */
  background-position: center; /* 背景图片居中显示 */
  padding: 0; /* 确保没有内边距 */
  margin: 0; /* 确保没有外边距 */
  height: 100vh; /* 使用视口高度 */
  box-sizing: border-box; /* 边框和内边距计算在宽度内 */
}

h1 {
  color: white;
  font-size: 50px;
}

/* 按钮样式 */
button {
  background-color: #007BFF; /* 设置按钮颜色 */
  color: white; /* 设置按钮文字颜色为白色 */
  border: none; /* 无边框 */
  padding: 10px 20px; /* 按钮内边距 */
  margin: 5px; /* 按钮外边距 */
  border-radius: 5px; /* 按钮圆角 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
  font-size: 16px; /* 文字大小 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时按钮颜色变深 */
}

/* 表格样式 */
.table1.table2 {
  opacity: 1; /* 设置透明度 */
  width: 100%;
  border-collapse: collapse;
  max-width: 100%;          /* 表格最大宽度不超过其父容器 */
  max-height: 80vh;         /* 表格最大高度不超过视口高度的80% */
  /* 背景色设置为透明，让背景图片可见 */
  background-color: transparent;
  box-sizing: border-box;
}

th, td {
  text-align: center;
  overflow: hidden; /* 隐藏超出单元格宽度的文本 */
  text-overflow: ellipsis; /* 当文本被隐藏时显示省略号 */
  width: auto;
  border: 1px solid #ddd;
  padding: 10px 70px;
  font-size: 16px; 
  /* 半透明背景色 */
  background-color: rgba(255, 255, 255, 0.6);
}

th {
  /* 表头背景色 */
  background-color: rgba(242, 242, 242, 0.8);
}


.button1{
  padding: 10px 50px;
}
.button2{
  padding: 10px 20px;
}

.lrm {
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center;/* 水平居中 */
  flex-direction: column; /* 子元素垂直排列 */
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  border: 1px solid #ddd; /* 边框颜色 */
  padding: 20px;           /* 内边距 */
  margin: 20px auto;       /* 外边距，自动左右边距实现水平居中 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影，提升立体感 */
  border-radius: 5px;      /* 边框圆角 */
  max-width: 500px;        /* 最大宽度，或根据需要调整 */
  width: auto;             /* 宽度自动 */
  word-wrap: break-word;   /* 允许长单词或链接换行 */
  min-height: 300px;       /* 最小高度 */
}

/* 确保h3和p标签在lrm内居中显示 */
.lrm h3{
  text-align: center;
  margin: 0 0 1px; 
}
.lrm p {
  text-align: center;       /* 文本居中 */
  margin: 20px 0;           /* 增加上下方的外边距 */
  padding: 20px 0;          /* 增加上下方的内边距 */
  word-wrap: break-word;     /* 允许长单词或链接换行 */
  hyphens: auto;            /* 允许在单词间断行 */
}

.button0 {
  padding: 10px 20px; /* 根据需要调整内边距 */
  margin: 10px 0 0;    /* 外边距，确保按钮位于文本下方并居中 */
}

</style>